<script setup lang="ts">
import { OperationType } from '@/entity/OperationType';
import { SysMenu } from '@/entity/SysMenu';
import menuService from '@/services/menu.service';
import { AxiosError } from 'axios';
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus';
import { onMounted, ref } from 'vue';
import MenuDetail from './MenuDetail.vue';
import { SysMenuType } from '@/entity/SysMenuType';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const treeList = ref<SysMenu[]>([]);
const selections = ref<SysMenu[]>([]);
const tableLoading = ref(false);

const detailDialogVisible = ref(false);
const detailDialogOperation = ref<OperationType>(OperationType.VIEW);
const detailDialogId = ref<number>();
const detailDialogParent = ref<SysMenu>();

const load = async (searchObj?: SysMenu) => {
    try {
        tableLoading.value = true;
        const res = await menuService.treeList();
        treeList.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        tableLoading.value = false;
    }
}

const create = () => {
    detailDialogOperation.value = OperationType.CREATE;
    detailDialogVisible.value = true;
};

const edit = () => {
    if (selections.value.length == 0 || selections.value.length > 1) {
        ElMessage({ message: "请选择一条数据", type: "error" });
        return;
    }

    const row = selections.value[0];
    editRow(row);
};

const remove = async (row?: SysMenu) => {
    let ids: number[] = [];
    if (row != null) {
        ids = [row.id];
    } else {
        ids = selections.value.map(it => it.id);
    }
    if (ids.length == 0) {
        ElMessage({ message: "请选择要删除的数据", type: "error" });
        return;
    }
    try {
        const flag = await ElMessageBox.confirm('确定要删除选中的数据吗');
        if (flag) {
            await menuService.remove(ids);
            ElMessage({ message: "删除成功", type: "success" });
            load();
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {

    }
};

const createChild = (row: SysMenu) => {
    detailDialogOperation.value = OperationType.CREATE;
    detailDialogVisible.value = true;
    detailDialogId.value = row.id;
    detailDialogParent.value = row;
};

const editRow = (row: SysMenu) => {
    detailDialogOperation.value = OperationType.EDIT;
    detailDialogVisible.value = true;
    detailDialogId.value = row.id;
};

const removeRow = (row: SysMenu) => {
    remove(row);
};

const selectionChanged = (val: SysMenu[]) => {
    selections.value = val;
}

const detailDialogVisibleChanged = (val: any) => {
    load();
};

onMounted(async () => {
    await load();
});
</script>

<template>
    <div class="flex">
        <ElButton size="small" :plain="true" type="primary" :icon="Plus" @click="create()">新增</ElButton>
        <ElButton size="small" :plain="true" type="success" :icon="Edit" @click="edit()">编辑</ElButton>
        <ElButton size="small" :plain="true" type="danger" :icon="Delete" @click="remove()">删除</ElButton>
    </div>
    <ElTable row-key="id" table-layout="auto" :data="treeList" :tree-props="{ children: 'children' }" default-expand-all
        @selection-change="selectionChanged($event)" v-loading="tableLoading">
        <ElTableColumn type="selection" width="55" />
        <ElTableColumn prop="name" label="名称"></ElTableColumn>
        <!-- <ElTableColumn prop="code" label="编号"></ElTableColumn> -->
        <ElTableColumn prop="type" label="类型">
            <template #default="scope">
                <span v-if="scope.row.type == SysMenuType.DIRECTORY">目录</span>
                <span v-if="scope.row.type == SysMenuType.MENU">菜单</span>
                <span v-if="scope.row.type == SysMenuType.BUTTON">按钮</span>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="icon" label="图标">
            <template #default="scope">
                <ElIcon v-if="scope.row.icon">
                    <component :is="scope.row.icon"></component>
                </ElIcon>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="display" label="是否显示">
            <template #default="scope">
                <span v-if="scope.row.display">是</span>
                <span v-else>否</span>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="orderNo" label="顺序"></ElTableColumn>
        <!-- <ElTableColumn prop="route" label="路由"> </ElTableColumn> -->
        <!-- <ElTableColumn prop="path" label="部署路径"> </ElTableColumn> -->
        <!-- <ElTableColumn prop="selector" label="选择器"> </ElTableColumn> -->
        <!-- <ElTableColumn prop="description" label="描述"></ElTableColumn> -->
        <!-- <ElTableColumn prop="createdTime" label="创建时间"></ElTableColumn> -->
        <ElTableColumn prop="operation" label="操作">
            <template #default="scope">
                <ElButton v-if="scope.row.type != SysMenuType.BUTTON" size="small" link type="primary" :icon="Plus"
                    @click="createChild(scope.row)">新增子级</ElButton>
                <ElButton size="small" link type="primary" :icon="Edit" @click="editRow(scope.row)">编辑</ElButton>
                <ElButton size="small" link type="primary" :icon="Delete" @click="removeRow(scope.row)">删除</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>

    <MenuDetail ref="detailDialog" v-model:visible="detailDialogVisible" :operation="detailDialogOperation"
        :id="detailDialogId" :parent="detailDialogParent" @update:visible="detailDialogVisibleChanged($event)">
    </MenuDetail>
</template>

<style scoped lang="scss"></style>